<template>
  <div class="login-container">
    <a-card class="content">
      <div class="left">
        <a-image
          :src="tool.getAssetsFile('welcome.png')"
          height="100%"
          :preview="false"
        ></a-image>
      </div>
      <div class="right">
        <h3 class="title">登录系统直接提交~</h3>
        <a-form
          ref="formRef"
          :rules="rules"
          layout="vertical"
          :model="formState"
          autocomplete="off"
          @finish="onFinish"
        >
          <a-form-item name="username">
            <a-input
              :defaultValue="formState.username"
              v-model:value="formState.username"
            >
              <template #prefix>
                <UserOutlined class="site-form-item-icon" />
              </template>
            </a-input>
          </a-form-item>

          <a-form-item name="password">
            <a-input-password
              :defaultValue="formState.password"
              v-model:value="formState.password"
              autocomplete="off"
            >
              <template #prefix>
                <LockOutlined class="site-form-item-icon" />
              </template>
            </a-input-password>
          </a-form-item>

          <a-form-item>
            <a-button type="primary" html-type="submit" block size="large"
              >走~</a-button
            >
          </a-form-item>
        </a-form>
      </div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { IUser } from "@/type/User";
import { ref, reactive, onMounted, h } from "vue";
import { useRouter } from "vue-router";
import {
  UserOutlined,
  LockOutlined,
  SmileOutlined,
} from "@ant-design/icons-vue";
import UserService from "@/service/userService";
import { FormInstance, message, notification } from "ant-design-vue";
import { Rule } from "ant-design-vue/lib/form";
import tool from "@/util/imgTool.js";

const formRef = ref<FormInstance>();
const formState = reactive<IUser>({
  username: "super",
  password: "123",
});
const $router = useRouter();
const usernameValidator = async (_rule: Rule, value: string) => {
  if (value === "") {
    return Promise.reject("用户名非空！");
  }
  return Promise.resolve();
};
const passwordValidator = async (_rule: Rule, value: string) => {
  if (value === "") {
    return Promise.reject("密码非空！");
  }
  return Promise.resolve();
};
const rules: Record<string, Rule[]> = {
  username: [
    {
      required: true,
      validator: usernameValidator,
      trigger: "change",
    },
  ],
  password: [
    {
      required: true,
      validator: passwordValidator,
      trigger: "change",
    },
  ],
};
const onFinish = async (value: IUser) => {
  if (!formState.password || !formState.username) {
    message.info({
      content: "请输入正确的用户名和密码",
    });
    return;
  }
  await UserService.login(value)
    .then((result) => {
      $router.push("/");
    })
    .catch((err) => {
      message.error(err);
    });
};
onMounted(() => {
  notification.open({
    message: "Good afternoon, good evening, And good night ~",
    style: {
      width: "500px",
    },
    duration: 3,
    btn: null,
    icon: () => h(SmileOutlined, { style: "color: #108ee9" }),
  });
});
</script>

<style lang="less" rel="stylesheet/less" scoped>
.login-container {
  background-color: #2d3a4b;
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  padding: 0 20px;
  .content {
    align-items: center;
    width: 100%;
    :deep(.ant-card-body) {
      display: flex;
      width: 100%;
      height: 100%;
      background-color: #2d3a4b;
      padding: 125px 263px;
      padding-left: 100px;
      .left {
        margin-right: 60px;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .right {
        width: 400px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .title {
          text-align: center;
          color: #fff;
        }
      }
    }
  }
}

:deep(.ant-input-affix-wrapper) {
  line-height: 2rem;
  background-color: #2d3a4b !important;
  color: #fff !important;

  & > input.ant-input {
    background: #2d3a4b !important;
    color: #fff !important;
  }

  .ant-input-password-icon.anticon {
    color: #fff;
  }
}
</style>
